<template>
  <view class="page-container">
    <S1Header title="语音播报配置" :on-back="goBack" />

    <view class="content-wrapper">
      <view class="form-list">
        <!-- 语音播报开关 -->
        <view class="form-item">
          <text class="item-label">
            语音播报
          </text>
          <switch
            :checked="formData.speaker === 1"
            color="#4ca75b"
            @change="onSpeakerChange"
          />
        </view>

        <!-- 键盘播报开关 -->
        <view class="form-item">
          <text class="item-label">
            键盘播报
          </text>
          <switch
            :checked="formData.keyboard_speaker === 1"
            color="#4ca75b"
            @change="onKeyboardSpeakerChange"
          />
        </view>

        <!-- 播报性别 -->
        <view class="form-item column">
          <text class="item-label">
            播报性别
          </text>
          <radio-group class="radio-group" @change="onGenderChange">
            <label class="radio-label">
              <radio
                :value="1"
                :checked="formData.speaker_gender === 1"
                color="#4ca75b"
              />
              <text class="radio-text">男</text>
            </label>
            <label class="radio-label">
              <radio
                :value="2"
                :checked="formData.speaker_gender === 2"
                color="#4ca75b"
              />
              <text class="radio-text">女</text>
            </label>
          </radio-group>
        </view>

        <!-- 播报速度 -->
        <view class="form-item column">
          <view class="slider-header">
            <text class="item-label">
              播报速度
            </text>
            <text class="slider-value">
              {{ formData.speaker_speed }}
            </text>
          </view>
          <view class="slider-wrapper">
            <slider
              :value="formData.speaker_speed"
              min="1"
              max="13"
              step="1"
              active-color="#4ca75b"
              background-color="#e5e5e5"
              block-size="24"
              @changing="onSpeedChanging"
              @change="onSpeedChange"
            />
          </view>
        </view>

        <!-- 播报音调 -->
        <view class="form-item column">
          <view class="slider-header">
            <text class="item-label">
              播报音调
            </text>
            <text class="slider-value">
              {{ formData.speaker_pitch }}
            </text>
          </view>
          <view class="slider-wrapper">
            <slider
              :value="formData.speaker_pitch"
              min="1"
              max="13"
              step="1"
              active-color="#4ca75b"
              background-color="#e5e5e5"
              block-size="24"
              @changing="onPitchChanging"
              @change="onPitchChange"
            />
          </view>
        </view>

        <!-- 播报音量 -->
        <view class="form-item column">
          <view class="slider-header">
            <text class="item-label">
              播报音量
            </text>
            <text class="slider-value">
              {{ formData.speaker_volume }}
            </text>
          </view>
          <view class="slider-wrapper">
            <slider
              :value="formData.speaker_volume"
              min="0"
              max="13"
              step="1"
              active-color="#4ca75b"
              background-color="#e5e5e5"
              block-size="24"
              @changing="onVolumeChanging"
              @change="onVolumeChange"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import S1Header from '@/components/S1Header.vue';
import { post } from '@/utils/request';

interface FormData {
  speaker: number;
  keyboard_speaker: number;
  speaker_gender: number;
  speaker_speed: number;
  speaker_pitch: number;
  speaker_volume: number;
}

defineOptions({ name: 'VoiceBroadcast' });

const formData = ref<FormData>({
  speaker: 0,
  keyboard_speaker: 0,
  speaker_gender: 1,
  speaker_speed: 5,
  speaker_pitch: 5,
  speaker_volume: 5,
});

const goBack = () => {
  uni.navigateBack();
};

// 获取语音播报配置
const getVoiceConfig = () => {
  try {
    const printerInfo = uni.getStorageSync('printer_info');
    if (printerInfo) {
      const info = JSON.parse(printerInfo);
      formData.value = {
        speaker: info.speaker || 0,
        keyboard_speaker: info.keyboard_speaker || 0,
        speaker_gender: info.speaker_gender || 1,
        speaker_speed: info.speaker_speed || 5,
        speaker_pitch: info.speaker_pitch || 5,
        speaker_volume: info.speaker_volume || 5,
      };
    }
  }
  catch (error) {
    console.error('获取语音播报配置失败:', error);
  }
};

// 保存配置
const saveConfig = async () => {
  try {
    const res: any = await post('/syapi/config/saveShoukuanLink', {
      data: {
        speaker: formData.value.speaker,
        keyboard_speaker: formData.value.keyboard_speaker,
        speaker_gender: formData.value.speaker_gender,
        speaker_speed: formData.value.speaker_speed,
        speaker_pitch: formData.value.speaker_pitch,
        speaker_volume: formData.value.speaker_volume,
      },
    });

    if (res.code === 200) {
      uni.setStorageSync('printer_info', JSON.stringify(res.data));
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
    }
    else {
      uni.showToast({
        title: res.msg || '保存失败',
        icon: 'none',
      });
    }
  }
  catch (error) {
    console.error('保存失败:', error);
    uni.showToast({
      title: '保存失败',
      icon: 'none',
    });
  }
};

// 语音播报开关变化
const onSpeakerChange = (e: any) => {
  formData.value.speaker = e.detail.value ? 1 : 0;
  saveConfig();
};

// 键盘播报开关变化
const onKeyboardSpeakerChange = (e: any) => {
  formData.value.keyboard_speaker = e.detail.value ? 1 : 0;
  saveConfig();
};

// 播报性别变化
const onGenderChange = (e: any) => {
  formData.value.speaker_gender = Number(e.detail.value);
  saveConfig();
};

// 播报速度实时变化
const onSpeedChanging = (e: any) => {
  formData.value.speaker_speed = e.detail.value;
};

// 播报速度变化
const onSpeedChange = (e: any) => {
  formData.value.speaker_speed = e.detail.value;
  saveConfig();
};

// 播报音调实时变化
const onPitchChanging = (e: any) => {
  formData.value.speaker_pitch = e.detail.value;
};

// 播报音调变化
const onPitchChange = (e: any) => {
  formData.value.speaker_pitch = e.detail.value;
  saveConfig();
};

// 播报音量实时变化
const onVolumeChanging = (e: any) => {
  formData.value.speaker_volume = e.detail.value;
};

// 播报音量变化
const onVolumeChange = (e: any) => {
  formData.value.speaker_volume = e.detail.value;
  saveConfig();
};

onMounted(() => {
  getVoiceConfig();
});
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.content-wrapper {
  padding: 20rpx 32rpx;
}

.form-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

  &:last-child {
    border-bottom: none;
  }

  &.column {
    flex-direction: column;
    align-items: stretch;
  }
}

.item-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.radio-group {
  display: flex;
  margin-top: 20rpx;
}

.radio-label {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.radio-text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 24rpx;
}

.slider-value {
  font-size: 28rpx;
  color: #4ca75b;
  font-weight: 600;
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
}

slider {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
</style>
